$(function () {


    findCuisineData();

    //赋值菜系数据
    function findCuisineData() {

        let res = myAjax("/cuisine/findAll", {isShow: 1}, 'get');
        if (res != null) {
            setCuisineData(res);
        }
    }

    function setCuisineData(data) {
        let html = '';
        for (let i = 0; i < data.length; i++) {
            html += '<div id="cuisineId' + data[i].id + '" onclick="findProductPage(' + data[i].id + ')">' + data[i].name + '</div>';
        }
        $("#cuisine").html(html);
        //根据菜系id得到产品
        let cuisineId = sessionStorage.getItem("cuisineId");
        findProductPage(cuisineId);
    }

});


// 根据菜系拿到产品
function findProductPage(cuisineId) {
    let res = myAjax("/product/count", {cuisineId: cuisineId}, "get");
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'page'
            , count: res.count
            , limit: 4
            , layout: ['count', 'prev', 'page', 'next']
            , jump: function (obj) {
                // console.log(obj)
                findProductByCuisineId(cuisineId, obj.curr, obj.limit);
            }
        });
    })
}

function findProductByCuisineId(id, page, limit) {
    sessionStorage.setItem("cuisineId", id);
    let res = myAjax("/product", {page: page, limit: limit, cuisineId: id}, "get");
    if (res != null) {
        setProductData(res);
    }

    $("#cuisine>div").each(function (e, t) {
        $(this).css({"background-color": "rgb(243, 243, 243)", "color": "black"});
        // $(this).addClass("product-style-hover");
    })
    $("#cuisineId" + id).css({"background-color": "rgb(230, 145, 55)", "color": "white"});
}

function setProductData(data) {
    let html = '';
    for (let i = 0; i < data.length; i++) {
        html += ' <div>\n' +
            '                        <div><img src="' + data[i].imgHref + '"></div>\n' +
            '                        <div class="font-title single-over">' + data[i].name + '</div>\n' +
            '                        <div class="justify-content-start">\n' +
            '                            <div>价格：</div>\n' +
            '                            <div class="price">' + data[i].normalPrice + '</div>\n' +
            '                        </div>\n' +
            '                        <div class="font-content many-over-three">\n' +
            '                           ' + data[i].content + ' \n' +
            '                        </div>\n' +
            '                    </div>';
    }
    $("#product").html(html);
}